<template>
    <div>
        <div style="overflow:scroll;border-bottom: 1px solid black; margin-bottom: 10px;overflow-x: hidden; overflow-y: auto;height: 400px;">
            <el-checkbox-group v-model="roleids">
                <el-checkbox style="width:28%;margin-bottom: 10px;" v-for="role in rolelist" :key="role.Id" :label="role.RoleName" :value="role.Id" :border="true" >
                </el-checkbox>
            </el-checkbox-group>
         </div>
         <ElButton type="primary" @click="auth" >授权</ElButton>
         <ElButton @click="reset" >重置</ElButton>
    </div>
</template>

<script setup lang="ts">
import roleapi from '@/api/roleapi';
import userroleapi from '@/api/userroleapi';
import { ElButton, ElMessage } from 'element-plus';
import { ref } from 'vue';

const emits = defineEmits(["onSave"])
const prop = defineProps({
    UserId:Number
})
const rolelist = ref();
const roleids = ref();
//保存重置的内容
let resetval:Array<any> = [];

const getrole = () =>{
    roleapi.select({}).then(res=>{
		console.log("res.data=",res.data)
        rolelist.value = res.data      
        getroleid()
    })
}

const getroleid = () =>{
    userroleapi.userrole({UserId:prop.UserId}).then(res=>{
        roleids.value = res.data
        resetval = res.data
    }).catch(err=>{
        console.log(err)
    })
}

getrole()

const auth= () =>{
    let obj = {UserId:prop.UserId , RoleIds:roleids.value}
    userroleapi.batch(obj).then(res=>{
        if (res.code > 0) {
            ElMessage({
                message :"授权成功",
                type:'success'
            })
            emits("onSave" , "auth")
        }else{
            ElMessage({
                message :"授权失败",
                type:"error"
            })
        }
    }).catch(err=>{
        console.log(err)
    })
}

const reset = () =>{
    roleids.value = resetval
}
</script>

<style scoped>

</style>



